<template>
    <div id="contact">
        <el-row style="height:100%">
            <el-col :span="9"  style="height:100%">
                <div class="aside">
                    <div class="menuBox">
                        <ul>
                            <li v-for="(item,index) in menuList" :key="index">
                                <div class="liItem" @click="contentChange(item.name)">
                                    <h4 :class="{activePath:item.name==currentName}">{{item.name}}</h4>
                                    <i v-show="item.name==currentName" class="el-icon-caret-top"></i>
                                </div>
                            </li>
                        </ul>
                        <div class="message" @click="dialogFormVisible=true">
                            
                            <img src="../assets/images/message.png" alt="">
                            <span>LEAVE US A MESSAGE</span>
                            
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="15" style="height:100%">
                <!-- SINGAPORE: -->
                 <div class="content" v-if='currentName=="SINGAPORE"'>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1365/1 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>TMI(VIETNAM)CO, LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37196008 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1165 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE INVESTMENT WORLDWIDE CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37198009 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                         <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>BLOCK D,LOC AN-BINH SON INDUSTRIAL ZONE,LONG THANH DISTRICT,DONG NAI PROVINCE, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE LONG THANH CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-613533616 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                </div>
                 <!-- CAMBODIA: -->
                 <div class="content" v-if='currentName=="CAMBODIA"'>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1365/1 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>TMI(VIETNAM)CO, LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37196008 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1165 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE INVESTMENT WORLDWIDE CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37198009 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                         <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>BLOCK D,LOC AN-BINH SON INDUSTRIAL ZONE,LONG THANH DISTRICT,DONG NAI PROVINCE, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE LONG THANH CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-613533616 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                </div>
                <!-- TANWAN: -->
                 <div class="content" v-if='currentName=="TANWAN"'>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1365/1 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>TMI(VIETNAM)CO, LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37196008 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1165 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE INVESTMENT WORLDWIDE CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37198009 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                         <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>BLOCK D,LOC AN-BINH SON INDUSTRIAL ZONE,LONG THANH DISTRICT,DONG NAI PROVINCE, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE LONG THANH CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-613533616 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                </div>
                <!-- VIETNAM: -->
                <div class="content" v-if='currentName=="VIETNAM"'>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1365/1 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>TMI(VIETNAM)CO, LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37196008 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1165 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE INVESTMENT WORLDWIDE CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37198009 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                         <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>BLOCK D,LOC AN-BINH SON INDUSTRIAL ZONE,LONG THANH DISTRICT,DONG NAI PROVINCE, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE LONG THANH CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-613533616 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                </div>
                <!-- CHINA: -->
                <div class="content" v-if='currentName=="CHINA"'>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1365/1 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>TMI(VIETNAM)CO, LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37196008 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                        <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>1165 NATIONAL ROAD 1A,AN PHU DONG WARD, DIST 12, HO CHI MINH CITY, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE INVESTMENT WORLDWIDE CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-8-37198009 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                         <div class="part">
                            <p>
                                <i class="el-icon-location"></i>
                                <span>BLOCK D,LOC AN-BINH SON INDUSTRIAL ZONE,LONG THANH DISTRICT,DONG NAI PROVINCE, VIETNAM</span>
                            </p>
                             <p>
                                <i class="el-icon-s-custom"></i>
                                <span>ELITE LONG THANH CO.,LTD</span>
                            </p>
                             <p>
                                <i class="el-icon-phone-outline"></i>
                                <span>TEL(84)-613533616 &nbsp;&nbsp;&nbsp;	FAX:(84)-8-37196002</span>
                            </p>
                        </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="LEAVE US A MESSAGE" :visible.sync="dialogFormVisible" width="40%" :show-close='false' :close-on-click-modal='false'
  center>
            <el-form :model="form" >
                <el-row>
                    <el-col :span="24" style="height:50px">
                        <el-form-item label="">
                            <el-input size='mini'  v-model="form.name" autocomplete="off" placeholder="Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="height:50px">
                        <el-form-item label="">
                            <el-input size='mini'  style="width:95%" v-model="form.email" autocomplete="off" placeholder="Email"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12" style="height:50px">
                        <el-form-item label="">
                            <el-input size='mini'  v-model="form.subject"  autocomplete="off" placeholder="Subject"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="24">
                        <el-form-item label="">
                            <el-input type="textarea" size='mini'  v-model="form.message" autocomplete="off" placeholder="Message"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <!-- <el-form-item label="">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
                <el-button type="success" @click="dialogFormVisible = false">Send Message</el-button>
            </div>
        </el-dialog>
        
        
    </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: [
        { name: "SINGAPORE" },
        { name: "CAMBODIA" },
        { name: "TANWAN" },
        { name: "VIETNAM" },
        { name: "CHINA" }
      ],
      currentName: "VIETNAM",
      form: {},
      dialogFormVisible: false
    };
  },
  methods: {
    contentChange(name) {
      this.currentName = name;
    }
  }
};
</script>
<style lang="less" scoped>
#contact {
  width: 90%;
  margin: auto;
  height: 100%;
  background-image: url("../assets/images/contact_bg.png");
  background-size: 100% 150px;
  background-repeat: no-repeat;
  .aside {
    width: 100%;
    height: 100%;
    padding-top: 20%;
    .menuBox {
      width: 60%;
      height: 70%;
      background-color: rgb(88, 180, 72);
      border-radius: 18px;
      ul {
        height: 100%;
        padding-top: 8%;

        li {
          height: 18%;
          text-align: center;

          .liItem {
            cursor: pointer;
            height: 100%;
            padding-top: 7%;
            display: inline-block;
            border-bottom: 1px solid #ccc;
          }
          h4 {
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            font-size: 16px;
          }
          i {
            color: rgba(255, 255, 255, 1);
          }
          h4.activePath {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
      .message {
        padding-top: 10%;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
        img {
          position: relative;
          width: 34px;
          top: 9px;
          left: 0;
        }
        span {
          color: rgb(88, 180, 72);
          font-weight: 600;
          border-bottom: 2px solid rgb(88, 180, 72);
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    .part:nth-last-of-type(1) {
      border: none;
    }
    .part {
      height: 32%;
      border-bottom: 2px solid rgba(88, 180, 72, 0.7);

      p {
        height: 30%;
        padding-top: 3%;
        font-size: 16px;
        i {
          color: rgb(88, 180, 72);
          font-size: 34px;

          margin-right: 2%;
        }
        span {
          display: inline-block;
          width: 90%;
        }
      }
    }
  }
}
</style>

